<template>
  <div class="app-container">
    <div class="filter-container">

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        查询
      </el-button>
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button> -->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        Export
      </el-button>
      <-->
      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        操作者
      </el-checkbox> -->
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column  align="left" label="内容" >
        <template slot-scope="scope">
          <span>{{ scope.row.text }}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="left" label="联系方式">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column width="170px"  align="left" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.time | formatDate }}</span>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />




  </div>


</template>

<script>
export { parseTime, formatTime } from '@/utils'
import { getstorelist,stores ,delstore} from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {
    formatDate(time) {
      console.log(time)
      return __.formatDate(new Date(time - 0), 'yyyy-MM-dd hh:mm:ss')
    },
    statufn(s){
      console.log(s,'-------')
      if(s=='1')return '待审核';
      if(s=='2')return '已审核';
      return '关闭';
    }
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'info',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // }
  },
  data() {
    return {
      textMap:{
        'update': '更新',
        'create': '创建'
      },
      dialogStatus:'create',
      dialogFormVisible: false,
      temp: {
        city: '',
        quxian: '',
        wuye: '',
        xiaoqu: '',
        status: true
      },
      importanceOptions: [
        { val:'', name: '全部' },
        { val:'1', name: '待审核' },
        { val:'2', name: '已审核' }

      ],
      rules: {
        city: [{ required: true, message: '商品名字 is required', trigger: 'blur' }],
        quxian: [{ required: true, message: '商品副标题 is required', trigger: 'blur' }],
        wuye: [{ required: true, message: '商品关键字 is required', trigger: 'blur' }],
        xiaoqu: [{ required: true, message: '商品简介 is required', trigger: 'blur' }]
      },
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        phone: '',
        name: '',
        status: '',
        limit: 20
      }
    }
  },
  watch: {
    // 'listQuery.status'(a,b){
    //   // console.log(a)
    //   this.getList()
    // }
  },
  created() {
    this.getList()
  },
  methods: {
    handleDelete(data){
      this.listLoading = true;
      this.$confirm(`确定要删除 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delstore({id: data.id}).then((res) => {
          // console.log(res);
          this.$notify({
            title: 'Success',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })

      }).catch(() => {
        this.listLoading = false;
      });
    },
    handleUpdate(data){
      // console.log(data)
      this.listLoading = true;
      this.$confirm(`确定要审核通过吗 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        stores({id: data.id, status: 2}).then((res) => {
          // console.log(res);
          this.$notify({
            title: 'Success',
            message: '审核通过!',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })

      }).catch(() => {
        this.listLoading = false;
      });
      // this.temp = data;
      // this.dialogStatus = 'update';
      // this.dialogFormVisible = true;

    },
    updateData(){
      this.listLoading = true;
      const tempData = Object.assign({}, this.temp);
      stores(tempData).then(response => {
        this.temp = {
          city: '',
          quxian: '',
          wuye: '',
          xiaoqu: '',
          status: true
        };
        this.$message({
          message: 'Success',
          type: 'success'
        });
        this.listLoading = false;
        this.dialogFormVisible = false;

      })
    },
    createData(){
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          tempData['register_time'] = new Date().getTime();
          this.listLoading = true
          stores(tempData).then(response => {
            this.temp = {
              city: '',
              quxian: '',
              wuye: '',
              xiaoqu: '',
              status: true
            };
            this.$message({
              message: 'Success',
              type: 'success'
            });
            this.getList();
            this.listLoading = false;
            this.dialogFormVisible = false;
          })
        }
      })


    },
    handleCreate(){
      this.dialogStatus = 'create';
      this.dialogFormVisible = true;
    },
    getList() {
      this.listLoading = true
      // ()
      getstorelist(this.listQuery).then(response => {
        // response.data.forEach(el => el['status'] = !!el['status'])
        this.list = response.data
        this.total = response.count
        this.listLoading = false
      })
      // if(this.listQuery.status === '提款'){
      //   fetchreporttkList(this.listQuery).then(response => {
      //     this.list = response.data.items
      //     this.total = response.data.total
      //     this.listLoading = false
      //   })
      // }
      // if(this.listQuery.status === '充值'){
      //   fetchreportList(this.listQuery).then(response => {
      //     this.list = response.data.items
      //     this.total = response.data.total
      //     this.listLoading = false
      //   })
      // }
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
